<template>
  <div>
    <a-row gutter={16}>
      <a-col :span="8" v-for="(metric, index) in metrics" :key="index">
        <a-card style="text-align: center;">
          <component :is="metric.icon" style="font-size: 32px; color: #690303;" />
          <h3 style="font-size: 20px; color: #690303;">{{ metric.title }}</h3>
          <a-statistic
              :value="metric.value"
              :value-style="{ fontSize: '24px', color: '#3f8600' }"
              :style="{ textAlign: 'center', marginBottom: '10px' }"
              :precision="2"
              :suffix="metric.unit"
          />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getMetricsWithUnits } from "@/apis/monitoring.js";
import {StockOutlined, InfoCircleOutlined, BarChartOutlined, DatabaseOutlined, ClockCircleOutlined, DesktopOutlined } from '@ant-design/icons-vue';

const metrics = ref([]);

const MetricsWithUnits = async () => {
  try {
    const res = await getMetricsWithUnits();
    const data = res.data;

    metrics.value = [
      {title: "活跃线程数", value: data["活跃线程数"], icon: DesktopOutlined},
      {title: "JVM已使用内存", value: data["JVM已使用内存"], icon: DatabaseOutlined},
      {title: "应用运行时间", value: data["应用运行时间"], icon: ClockCircleOutlined},
      {title: "系统CPU使用率", value: data["系统CPU使用率"],icon: StockOutlined },
      {title: "JVM最大内存", value: data["JVM最大内存"], icon: BarChartOutlined},
      {title: "守护线程数", value: data["守护线程数"],  icon: InfoCircleOutlined}
    ];
  } catch (error) {
    console.error("Error fetching metrics:", error);
  }
};

onMounted(() => {
  MetricsWithUnits();
  setInterval(() => {
    MetricsWithUnits();
  }, 100000);
});
</script>

<style scoped>
.chart {
  width: 100%;
}
</style>
